<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试管理 - 一体化作战平台</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- Tailwind配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#0066cc',
                        secondary: '#0099cc',
                        success: '#009966',
                        warning: '#ff9900',
                        danger: '#cc3300',
                        neutral: {
                            50: '#f9fafb',
                            100: '#f3f4f6',
                            200: '#e5e7eb',
                            300: '#d1d5db',
                            400: '#9ca3af',
                            500: '#6b7280',
                            600: '#4b5563',
                            700: '#374151',
                            800: '#1f2937',
                            900: '#111827'
                        }
                    },
                    boxShadow: {
                        'card': '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
                        'card-hover': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'
                    }
                }
            }
        }
    </script>
    
    <style>
        .transition-all-300 {
            transition: all 300ms ease-in-out;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .bg-success-50 {
            background-color: rgba(0, 153, 102, 0.05);
        }
        .border-success-200 {
            border-color: rgba(0, 153, 102, 0.2);
        }
        .bg-danger-50 {
            background-color: rgba(204, 51, 0, 0.05);
        }
        .border-danger-200 {
            border-color: rgba(204, 51, 0, 0.2);
        }
        .bg-blue-50 {
            background-color: rgba(0, 102, 204, 0.05);
        }
        .border-blue-200 {
            border-color: rgba(0, 102, 204, 0.2);
        }
    </style>
</head>
<body class="bg-neutral-100 font-sans text-neutral-600 min-h-screen flex flex-col">
    <!-- 顶部导航栏 -->
    <header class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
        <div class="flex items-center justify-between px-4 py-3">
            <!-- Logo和标题 -->
            <div class="flex items-center space-x-3">
                <button id="menuToggle" class="md:hidden p-2 rounded-md hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bars text-neutral-600"></i>
                </button>
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                        <i class="fa fa-cube text-white text-sm"></i>
                    </div>
                    <h1 class="text-lg font-bold text-neutral-800 hidden sm:block">一体化作战平台</h1>
                </div>
            </div>
            
            <!-- 右侧用户区域 -->
            <div class="flex items-center space-x-1 md:space-x-4">
                <!-- 通知按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300">
                    <i class="fa fa-bell-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-danger rounded-full"></span>
                </button>
                
                <!-- 消息按钮 -->
                <button class="relative p-2 rounded-full hover:bg-neutral-100 transition-all-300 hidden md:block">
                    <i class="fa fa-envelope-o text-lg text-neutral-600"></i>
                    <span class="absolute top-0 right-0 w-2 h-2 bg-primary rounded-full"></span>
                </button>
                
                <!-- 用户头像 -->
                <div class="flex items-center space-x-2 ml-2">
                    <div class="w-8 h-8 bg-neutral-200 rounded-full overflow-hidden">
                        <img src="https://picsum.photos/id/1005/200/200" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    <span class="hidden md:block text-sm font-medium text-neutral-700">张三</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主体内容 -->
    <div class="flex pt-16 flex-1">
        <!-- 左侧导航菜单 -->
        <aside class="w-16 md:w-64 bg-white shadow-sm fixed h-full left-0 top-16 overflow-y-auto scrollbar-hide transform md:transform-none transition-transform duration-300 z-40 -translate-x-full md:translate-x-0">
            <nav class="py-4">
                <ul>
                    <!-- 主导航项 -->
                    <li class="mb-1">
                        <a href="index.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-tachometer text-lg"></i>
                            <span class="hidden md:block">首页</span>
                        </a>
                    </li>
                    
                    <!-- 交付流程模块 -->
                    <li class="mb-1">
                        <a href="business_strategy.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-line-chart text-lg"></i>
                            <span class="hidden md:block">业务战略</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="architecture-management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-sitemap text-lg"></i>
                            <span class="hidden md:block">架构管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="requirementsManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-list-alt text-lg"></i>
                            <span class="hidden md:block">需求管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="design-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                                <a href="design_management.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-paint-brush text-lg"></i>
                                    <span class="hidden md:block">设计管理</span>
                                </a>
                                <button id="design-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="design-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="interface_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-plug text-sm"></i>
                                        <span class="hidden md:block">接口管理</span>
                                    </a>
                                    <a href="model_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cubes text-sm"></i>
                                        <span class="hidden md:block">模型管理</span>
                                    </a>
                                    <a href="data_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-database text-sm"></i>
                                        <span class="hidden md:block">字典管理</span>
                                    </a>
                                    <a href="ui_management.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-desktop text-sm"></i>
                                        <span class="hidden md:block">差异分析</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="schedule_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-calendar text-lg"></i>
                            <span class="hidden md:block">排期管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="developmentMage.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-code text-lg"></i>
                            <span class="hidden md:block">开发管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <div class="test-menu-wrapper">
                            <div class="flex items-center justify-between px-4 py-3 text-primary bg-primary/5 border-r-4 border-primary">
                                <a href="testManagement.html" class="flex items-center space-x-3 flex-1" onclick="event.stopPropagation();">
                                    <i class="fa fa-bug text-lg"></i>
                                    <span class="hidden md:block font-medium">测试管理</span>
                                </a>
                                <button id="test-menu-toggle" class="hidden md:block p-1 hover:bg-neutral-200 rounded transition-all" aria-label="展开/收起子菜单" onclick="event.stopPropagation();">
                                    <i class="fa fa-chevron-right text-xs transform transition-transform duration-300"></i>
                                </button>
                            </div>
                            <!-- 下拉子菜单 -->
                            <div id="test-submenu" class="hidden overflow-hidden transition-all duration-300 ease-in-out">
                                <div class="bg-neutral-50 py-1">
                                    <a href="test_cases.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-file-text-o text-sm"></i>
                                        <span class="hidden md:block">测试案例</span>
                                    </a>
                                    <a href="test_plans.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-calendar-check-o text-sm"></i>
                                        <span class="hidden md:block">测试计划</span>
                                    </a>
                                    <a href="test_reports.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-bar-chart text-sm"></i>
                                        <span class="hidden md:block">测试报告</span>
                                    </a>
                                    <a href="test_global_settings.html" class="flex items-center space-x-3 px-4 py-2 pl-12 text-neutral-600 hover:bg-primary/5 hover:text-primary transition-all text-sm">
                                        <i class="fa fa-cogs text-sm"></i>
                                        <span class="hidden md:block">全局设置</span>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li>
                    
                    <li class="mb-1">
                        <a href="production_workflow.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-rocket text-lg"></i>
                            <span class="hidden md:block">投产上线</span>
                        </a>
                    </li>
                    
                    <!-- 新增的三个子菜单项 -->
                    <li class="mb-1">
                        <a href="quality_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-check-circle text-lg"></i>
                            <span class="hidden md:block">质量管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="security_management.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-shield text-lg"></i>
                            <span class="hidden md:block">安全管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="efficiency_metrics.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-bar-chart text-lg"></i>
                            <span class="hidden md:block">效能度量</span>
                        </a>
                    </li>
                    
                    <!-- 分隔线 -->
                    <li class="my-2">
                        <div class="border-t border-neutral-200 mx-4"></div>
                    </li>
                    
                    <!-- 公共模块 -->
                    <li class="mb-1">
                        <a href="teamManagement.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-users text-lg"></i>
                            <span class="hidden md:block">团队管理</span>
                        </a>
                    </li>
                    
                    <li class="mb-1">
                        <a href="settings.html" class="flex items-center space-x-3 px-4 py-3 text-neutral-600 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-cog text-lg"></i>
                            <span class="hidden md:block">设置</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </aside>

        <!-- 主内容区域 -->
        <main class="flex-1 ml-16 md:ml-64 p-4 md:p-6 bg-neutral-100 min-h-screen">
            <!-- 面包屑导航 -->
            <div class="mb-6">
                <nav class="flex" aria-label="面包屑">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="index.html" class="inline-flex items-center text-sm font-medium text-neutral-500 hover:text-primary">
                                <i class="fa fa-home mr-2"></i>
                                首页
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <i class="fa fa-chevron-right text-neutral-400 text-xs mx-2"></i>
                                <span class="text-sm font-medium text-neutral-700">测试管理</span>
                            </div>
                        </li>
                    </ol>
                </nav>
            </div>

            <!-- 页面标题 -->
            <div class="flex justify-between items-center mb-6">
                <div>
                    <h1 class="text-2xl font-bold text-neutral-800">测试管理</h1>
                    <p class="text-sm text-neutral-500 mt-1">管理软件测试全生命周期，包括测试计划、用例设计、执行跟踪和质量保证</p>
                </div>
                <div class="flex space-x-3">
                    <button class="px-4 py-2 bg-white border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300 flex items-center">
                        <i class="fa fa-download mr-2"></i> 导出报告
                    </button>
                    <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center">
                        <i class="fa fa-plus mr-2"></i> 新建测试计划
                    </button>
                </div>
            </div>

            <!-- 数据概览卡片 -->
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6 mb-6">
                <!-- 测试计划数 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">测试计划</p>
                            <h3 class="text-2xl font-bold text-neutral-700">8</h3>
                            <p class="text-success text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 2个进行中
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary">
                            <i class="fa fa-clipboard"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 测试用例数 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">测试用例</p>
                            <h3 class="text-2xl font-bold text-neutral-700">156</h3>
                            <p class="text-warning text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 12个待执行
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-secondary/10 flex items-center justify-center text-secondary">
                            <i class="fa fa-list-alt"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 执行进度 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">执行进度</p>
                            <h3 class="text-2xl font-bold text-neutral-700">78%</h3>
                            <p class="text-success text-xs mt-2">
                                <i class="fa fa-arrow-up"></i> 本周完成23个
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-success/10 flex items-center justify-center text-success">
                            <i class="fa fa-check-circle"></i>
                        </div>
                    </div>
                </div>
                
                <!-- 缺陷发现率 -->
                <div class="bg-white rounded-lg shadow-card p-4 transition-all-300 hover:shadow-lg">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-neutral-500 text-sm mb-1">待修复缺陷</p>
                            <h3 class="text-2xl font-bold text-neutral-700">5</h3>
                            <p class="text-danger text-xs mt-2">
                                <i class="fa fa-arrow-down"></i> 2个高优先级
                            </p>
                        </div>
                        <div class="w-10 h-10 rounded-full bg-danger/10 flex items-center justify-center text-danger">
                            <i class="fa fa-bug"></i>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 主要功能区域 -->
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-6">
                <!-- 测试计划管理 -->
                <div class="bg-white rounded-lg shadow-card p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">测试计划</h2>
                        <button class="text-primary text-sm hover:underline">查看全部</button>
                    </div>
                    <div class="space-y-3">
                        <!-- 测试计划项 -->
                        <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <h3 class="font-medium text-neutral-700">个人存款系统V2.0测试</h3>
                                    <p class="text-sm text-neutral-500 mt-1">包含功能测试、性能测试、安全测试</p>
                                    <div class="flex items-center mt-2 space-x-4">
                                        <span class="text-xs text-neutral-500">
                                            <i class="fa fa-calendar mr-1"></i>2024-01-15 ~ 2024-02-28
                                        </span>
                                        <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">进行中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <h3 class="font-medium text-neutral-700">移动银行App接口测试</h3>
                                    <p class="text-sm text-neutral-500 mt-1">API接口自动化测试验证</p>
                                    <div class="flex items-center mt-2 space-x-4">
                                        <span class="text-xs text-neutral-500">
                                            <i class="fa fa-calendar mr-1"></i>2024-02-01 ~ 2024-02-15
                                        </span>
                                        <span class="text-xs px-2 py-1 bg-primary/10 text-primary rounded-full">待开始</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 测试用例设计 -->
                <div class="bg-white rounded-lg shadow-card p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">测试用例设计</h2>
                        <button class="text-primary text-sm hover:underline">管理用例</button>
                    </div>
                    <div class="space-y-3">
                        <!-- 用例设计项 -->
                        <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <h3 class="font-medium text-neutral-700">用户登录功能测试用例</h3>
                                    <p class="text-sm text-neutral-500 mt-1">涵盖正常登录、异常处理、安全验证</p>
                                    <div class="flex items-center mt-2 space-x-4">
                                        <span class="text-xs text-neutral-500">
                                            <i class="fa fa-user mr-1"></i>负责人: 周八
                                        </span>
                                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">已完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                            <div class="flex justify-between items-start">
                                <div class="flex-1">
                                    <h3 class="font-medium text-neutral-700">转账交易流程测试用例</h3>
                                    <p class="text-sm text-neutral-500 mt-1">包含限额验证、余额检查、交易记录</p>
                                    <div class="flex items-center mt-2 space-x-4">
                                        <span class="text-xs text-neutral-500">
                                            <i class="fa fa-user mr-1"></i>负责人: 李四
                                        </span>
                                        <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">设计中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 测试项目执行进展 -->
                <div class="bg-white rounded-lg shadow-card p-6">
                    <div class="flex justify-between items-center mb-4">
                        <h2 class="text-lg font-bold text-neutral-700">执行进展</h2>
                        <button class="text-primary text-sm hover:underline">详细报告</button>
                    </div>
                    <div class="space-y-3">
                        <!-- 执行进展项 -->
                        <div class="p-3 border border-neutral-200 rounded-md">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="font-medium text-neutral-700">登录模块测试</h3>
                                <span class="text-sm text-neutral-500">85%</span>
                            </div>
                            <div class="w-full bg-neutral-200 rounded-full h-2">
                                <div class="bg-success h-2 rounded-full" style="width: 85%"></div>
                            </div>
                            <div class="flex justify-between text-xs text-neutral-500 mt-1">
                                <span>通过: 17/20</span>
                                <span>失败: 2</span>
                                <span>待执行: 1</span>
                            </div>
                        </div>
                        
                        <div class="p-3 border border-neutral-200 rounded-md">
                            <div class="flex justify-between items-center mb-2">
                                <h3 class="font-medium text-neutral-700">交易模块测试</h3>
                                <span class="text-sm text-neutral-500">60%</span>
                            </div>
                            <div class="w-full bg-neutral-200 rounded-full h-2">
                                <div class="bg-warning h-2 rounded-full" style="width: 60%"></div>
                            </div>
                            <div class="flex justify-between text-xs text-neutral-500 mt-1">
                                <span>通过: 12/25</span>
                                <span>失败: 3</span>
                                <span>待执行: 10</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测试环境管理 -->
            <div class="bg-white rounded-lg shadow-card p-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold text-neutral-700">测试环境管理</h2>
                    <div class="flex space-x-3">
                        <button class="px-4 py-2 bg-white border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-50 transition-all-300 flex items-center">
                            <i class="fa fa-refresh mr-2"></i> 刷新环境
                        </button>
                        <button class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center">
                            <i class="fa fa-plus mr-2"></i> 新增环境
                        </button>
                    </div>
                </div>
                
                <!-- 环境清单 -->
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <!-- 测试环境A -->
                    <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="bg-gradient-to-r from-primary/10 to-secondary/10 p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-bold text-neutral-800 text-lg">测试环境A</h3>
                                    <p class="text-sm text-neutral-600 mt-1">环境标识: <span class="font-medium text-primary">TRA</span></p>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-success/10 text-success">
                                    运行中
                                </span>
                            </div>
                            <div class="mt-3 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-tag mr-2 text-primary"></i>
                                <span>当前版本: <span class="font-medium">v2.1.0</span></span>
                            </div>
                            <div class="mt-2 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-play-circle mr-2 text-success"></i>
                                <span>正在执行: <span class="font-medium text-success">个人存款系统V2.0测试</span></span>
                            </div>
                        </div>
                        <div class="p-4">
                            <!-- 测试执行统计 -->
                            <div class="mb-4 pb-4 border-b border-neutral-200">
                                <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                    <i class="fa fa-bar-chart mr-2 text-primary"></i>
                                    测试执行情况
                                </h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-success">23</div>
                                        <div class="text-xs text-neutral-500">已完成</div>
                                    </div>
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-warning">7</div>
                                        <div class="text-xs text-neutral-500">待执行</div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                <i class="fa fa-cube mr-2 text-secondary"></i>
                                可用制品包
                            </h4>
                            <div class="space-y-2 max-h-64 overflow-y-auto">
                                <!-- 制品包项 -->
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.1.0" data-env="TRA">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-primary mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.1.0</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-15 10:30</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">最新</span>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>8个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                                
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.0.5" data-env="TRA">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-neutral-500 mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.0.5</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-10 14:20</p>
                                        </div>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>8个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                                
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.0.3" data-env="TRA">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-neutral-500 mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.0.3</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-05 09:15</p>
                                        </div>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>7个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 测试环境B -->
                    <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="bg-gradient-to-r from-secondary/10 to-success/10 p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-bold text-neutral-800 text-lg">测试环境B</h3>
                                    <p class="text-sm text-neutral-600 mt-1">环境标识: <span class="font-medium text-secondary">TC</span></p>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-success/10 text-success">
                                    运行中
                                </span>
                            </div>
                            <div class="mt-3 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-tag mr-2 text-secondary"></i>
                                <span>当前版本: <span class="font-medium">v2.0.5</span></span>
                            </div>
                            <div class="mt-2 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-play-circle mr-2 text-success"></i>
                                <span>正在执行: <span class="font-medium text-success">API接口兼容性测试</span></span>
                            </div>
                        </div>
                        <div class="p-4">
                            <!-- 测试执行统计 -->
                            <div class="mb-4 pb-4 border-b border-neutral-200">
                                <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                    <i class="fa fa-bar-chart mr-2 text-secondary"></i>
                                    测试执行情况
                                </h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-success">18</div>
                                        <div class="text-xs text-neutral-500">已完成</div>
                                    </div>
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-warning">12</div>
                                        <div class="text-xs text-neutral-500">待执行</div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                <i class="fa fa-cube mr-2 text-secondary"></i>
                                可用制品包
                            </h4>
                            <div class="space-y-2 max-h-64 overflow-y-auto">
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.0.5-b" data-env="TRB">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-primary mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.0.5</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-10 14:20</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">最新</span>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>8个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                                
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.0.3-b" data-env="TRB">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-neutral-500 mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.0.3</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-05 09:15</p>
                                        </div>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>7个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 预生产环境 -->
                    <div class="border border-neutral-200 rounded-lg overflow-hidden hover:shadow-lg transition-all-300">
                        <div class="bg-gradient-to-r from-warning/10 to-danger/10 p-4 border-b border-neutral-200">
                            <div class="flex justify-between items-start">
                                <div>
                                    <h3 class="font-bold text-neutral-800 text-lg">预生产环境</h3>
                                    <p class="text-sm text-neutral-600 mt-1">环境标识: <span class="font-medium text-warning">TP</span></p>
                                </div>
                                <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                    待部署
                                </span>
                            </div>
                            <div class="mt-3 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-tag mr-2 text-warning"></i>
                                <span>当前版本: <span class="font-medium">v2.0.3</span></span>
                            </div>
                            <div class="mt-2 flex items-center text-sm text-neutral-600">
                                <i class="fa fa-pause-circle mr-2 text-warning"></i>
                                <span>正在执行: <span class="font-medium text-warning">无测试计划</span></span>
                            </div>
                        </div>
                        <div class="p-4">
                            <!-- 测试执行统计 -->
                            <div class="mb-4 pb-4 border-b border-neutral-200">
                                <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                    <i class="fa fa-bar-chart mr-2 text-warning"></i>
                                    测试执行情况
                                </h4>
                                <div class="grid grid-cols-2 gap-3">
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-success">0</div>
                                        <div class="text-xs text-neutral-500">已完成</div>
                                    </div>
                                    <div class="bg-neutral-50 p-3 rounded-md text-center">
                                        <div class="text-lg font-bold text-neutral-500">30</div>
                                        <div class="text-xs text-neutral-500">待执行</div>
                                    </div>
                                </div>
                            </div>
                            <h4 class="text-sm font-semibold text-neutral-700 mb-3 flex items-center">
                                <i class="fa fa-cube mr-2 text-secondary"></i>
                                可用制品包
                            </h4>
                            <div class="space-y-2 max-h-64 overflow-y-auto">
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.1.0-tp" data-env="TP">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-primary mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.1.0</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-15 10:30</p>
                                        </div>
                                        <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">最新</span>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>8个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                                
                                <div class="p-3 border border-neutral-200 rounded-md hover:border-primary/50 hover:bg-primary/5 transition-all-300 cursor-pointer artifact-item" data-artifact="ipdo-v2.0.3-tp" data-env="TP">
                                    <div class="flex justify-between items-start">
                                        <div class="flex-1">
                                            <div class="flex items-center">
                                                <i class="fa fa-archive text-neutral-500 mr-2"></i>
                                                <span class="font-medium text-neutral-700">ipdo-v2.0.3</span>
                                            </div>
                                            <p class="text-xs text-neutral-500 mt-1">2024-01-05 09:15</p>
                                        </div>
                                    </div>
                                    <div class="mt-2 flex items-center text-xs text-neutral-600">
                                        <i class="fa fa-code-fork mr-1"></i>
                                        <span>7个发布单元</span>
                                        <span class="mx-2">•</span>
                                        <i class="fa fa-check-circle mr-1 text-success"></i>
                                        <span>集成测试通过</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测试任务-测试用例设计待办事项 -->
            <div class="bg-white rounded-lg shadow-card p-6 mb-6">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold text-neutral-700">测试任务 - 测试用例设计</h2>
                    <button id="createTestCaseBtn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center">
                        <i class="fa fa-plus mr-2"></i> 创建测试用例
                    </button>
                </div>
                <div class="space-y-3">
                    <!-- 待办事项列表 -->
                    <div class="flex items-start p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                        <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium text-neutral-700">设计存款业务测试用例</h3>
                                <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">今日到期</span>
                            </div>
                            <p class="text-sm text-neutral-500 mt-1">完成个人存款、定期存款相关功能的测试用例设计</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex items-center space-x-1">
                                    <span class="text-xs text-neutral-500">测试管理</span>
                                    <span class="text-neutral-300">|</span>
                                    <span class="text-xs text-neutral-500">高优先级</span>
                                </div>
                                <button class="text-neutral-400 hover:text-neutral-600">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                        <input type="checkbox" class="mt-1 mr-3 h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium text-neutral-700">完善API接口测试用例</h3>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">明日到期</span>
                            </div>
                            <p class="text-sm text-neutral-500 mt-1">补充移动端API接口的边界条件和异常处理测试用例</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex items-center space-x-1">
                                    <span class="text-xs text-neutral-500">测试管理</span>
                                    <span class="text-neutral-300">|</span>
                                    <span class="text-xs text-neutral-500">中优先级</span>
                                </div>
                                <button class="text-neutral-400 hover:text-neutral-600">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>

                    <div class="flex items-start p-3 border border-neutral-200 rounded-md hover:border-primary/30 transition-all-300">
                        <input type="checkbox" checked class="mt-1 mr-3 h-4 w-4 text-primary rounded border-neutral-300 focus:ring-primary">
                        <div class="flex-1">
                            <div class="flex justify-between">
                                <h3 class="font-medium text-neutral-700 line-through">用户权限管理测试用例评审</h3>
                                <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">已完成</span>
                            </div>
                            <p class="text-sm text-neutral-500 mt-1">完成用户权限相关测试用例的设计与评审</p>
                            <div class="flex justify-between items-center mt-2">
                                <div class="flex items-center space-x-1">
                                    <span class="text-xs text-neutral-500">测试管理</span>
                                    <span class="text-neutral-300">|</span>
                                    <span class="text-xs text-neutral-500">已完成</span>
                                </div>
                                <button class="text-neutral-400 hover:text-neutral-600">
                                    <i class="fa fa-ellipsis-v"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 测试用例库 -->
            <div class="bg-white rounded-lg shadow-card overflow-hidden">
                <div class="p-6 border-b border-neutral-200">
                    <div class="flex justify-between items-center">
                        <h2 class="text-lg font-bold text-neutral-700">测试用例库</h2>
                        <div class="flex space-x-3">
                            <div class="relative">
                                <input type="text" placeholder="搜索测试用例..." class="pl-10 pr-4 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                                <i class="fa fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-neutral-400"></i>
                            </div>
                            <select class="px-3 py-2 border border-neutral-200 rounded-md focus:outline-none focus:ring-2 focus:ring-primary">
                                <option value="">所有模块</option>
                                <option value="login">登录模块</option>
                                <option value="transaction">交易模块</option>
                                <option value="account">账户模块</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-neutral-200">
                        <thead class="bg-neutral-50">
                            <tr>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    用例编号
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    用例名称
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    所属模块
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    优先级
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    状态
                                </th>
                                <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    创建人
                                </th>
                                <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-neutral-500 uppercase tracking-wider">
                                    操作
                                </th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-neutral-200">
                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                    TC001
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    用户正常登录验证
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    登录模块
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-danger/10 text-danger">
                                        高
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-success/10 text-success">
                                        通过
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    周八
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-edit"></i> 编辑
                                    </button>
                                    <button class="text-neutral-500 hover:text-neutral-700 mr-3">
                                        <i class="fa fa-eye"></i> 查看
                                    </button>
                                    <button class="text-success hover:text-success/80">
                                        <i class="fa fa-play"></i> 执行
                                    </button>
                                </td>
                            </tr>

                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                    TC002
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    用户密码错误登录
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    登录模块
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                                        中
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
                                        待执行
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    周八
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-edit"></i> 编辑
                                    </button>
                                    <button class="text-neutral-500 hover:text-neutral-700 mr-3">
                                        <i class="fa fa-eye"></i> 查看
                                    </button>
                                    <button class="text-success hover:text-success/80">
                                        <i class="fa fa-play"></i> 执行
                                    </button>
                                </td>
                            </tr>

                            <tr class="hover:bg-neutral-50 transition-all-300">
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                                    TC003
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    转账金额验证
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    交易模块
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-danger/10 text-danger">
                                        高
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap">
                                    <span class="px-2 py-1 text-xs font-medium rounded-full bg-danger/10 text-danger">
                                        失败
                                    </span>
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                                    李四
                                </td>
                                <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                    <button class="text-primary hover:text-primary/80 mr-3">
                                        <i class="fa fa-edit"></i> 编辑
                                    </button>
                                    <button class="text-neutral-500 hover:text-neutral-700 mr-3">
                                        <i class="fa fa-eye"></i> 查看
                                    </button>
                                    <button class="text-success hover:text-success/80">
                                        <i class="fa fa-play"></i> 执行
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

                <!-- 分页 -->
                <div class="px-6 py-4 border-t border-neutral-200 flex justify-between items-center">
                    <div class="text-sm text-neutral-500">
                        显示 1-10 条，共 23 条测试用例
                    </div>
                    <div class="flex space-x-1">
                        <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-500 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-chevron-left"></i>
                        </button>
                        <button class="px-3 py-1 border border-primary rounded-md bg-primary text-white">
                            1
                        </button>
                        <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-700 hover:bg-neutral-50 transition-all-300">
                            2
                        </button>
                        <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-700 hover:bg-neutral-50 transition-all-300">
                            3
                        </button>
                        <button class="px-3 py-1 border border-neutral-200 rounded-md bg-white text-neutral-500 hover:bg-neutral-50 transition-all-300">
                            <i class="fa fa-chevron-right"></i>
                        </button>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 创建测试用例模态对话框 -->
    <div id="createTestCaseModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col">
            <!-- 模态对话框头部 -->
            <div class="flex justify-between items-center p-4 border-b border-neutral-200 flex-shrink-0">
                <div>
                    <h2 class="text-xl font-bold text-neutral-800">创建测试用例</h2>
                    <p class="text-sm text-neutral-500 mt-1">基于业务需求和模型变更智能生成测试用例</p>
                </div>
                <button id="closeModal" class="text-neutral-400 hover:text-neutral-600 transition-all-300">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <!-- 模态对话框内容 -->
            <div class="overflow-y-auto flex-1">
                <div class="p-4">
                    <!-- 关联的业务需求 -->
                    <div class="mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800 mb-2 flex items-center">
                            <i class="fa fa-file-text-o text-primary mr-2"></i>
                            关联的业务需求
                        </h3>
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <div class="flex items-start">
                                <div class="w-10 h-10 bg-primary/10 rounded-lg flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                    <i class="fa fa-lightbulb-o"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-neutral-800">REQ-2024-001: 个人存款系统功能增强</h4>
                                    <p class="text-sm text-neutral-600 mt-1">为个人客户提供更便捷的存款管理功能，包括定期存款自动转存、利息计算优化、存款产品推荐等核心功能模块。</p>
                                    <div class="flex items-center mt-2 text-xs text-neutral-500">
                                        <span class="mr-4"><i class="fa fa-user mr-1"></i>需求方: 产品部</span>
                                        <span class="mr-4"><i class="fa fa-calendar mr-1"></i>截止日期: 2024-03-31</span>
                                        <span class="px-2 py-1 bg-warning/10 text-warning rounded-full">进行中</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 模型变更清单 -->
                    <div class="mb-4">
                        <h3 class="text-lg font-semibold text-neutral-800 mb-2 flex items-center">
                            <i class="fa fa-sitemap text-secondary mr-2"></i>
                            模型变更清单
                        </h3>
                        <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-3">
                            <!-- 五层架构展示 -->
                            <div class="space-y-3">
                                <!-- 业务领域层 -->
                                <div class="border-l-4 border-primary pl-3">
                                    <h4 class="font-medium text-neutral-800 flex items-center">
                                        <i class="fa fa-building text-primary mr-2"></i>
                                        业务领域: 个人金融服务
                                    </h4>
                                    
                                    <!-- 价值流层 -->
                                    <div class="ml-4 mt-2 border-l-4 border-secondary pl-3">
                                        <h5 class="font-medium text-neutral-700 flex items-center">
                                            <i class="fa fa-arrow-right text-secondary mr-2"></i>
                                            价值流: 个人存款管理流程
                                        </h5>
                                        
                                        <!-- 活动层 -->
                                        <div class="ml-4 mt-2 border-l-4 border-success pl-3">
                                            <h6 class="font-medium text-neutral-700 flex items-center">
                                                <i class="fa fa-cogs text-success mr-2"></i>
                                                活动: 存款产品操作管理
                                            </h6>
                                            
                                            <!-- 任务层 -->
                                            <div class="ml-4 mt-2 space-y-2">
                                                <div class="border-l-4 border-warning pl-3">
                                                    <h6 class="font-medium text-neutral-600 flex items-center">
                                                        <i class="fa fa-tasks text-warning mr-2"></i>
                                                        任务: 定期存款管理
                                                    </h6>
                                                    
                                                    <!-- 步骤层 -->
                                                    <div class="ml-4 mt-1 space-y-1">
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step1" class="mr-3 h-4 w-4 text-primary rounded border-neutral-300">
                                                                <label for="step1" class="text-sm text-neutral-700 cursor-pointer">
                                                                    步骤: 创建定期存款账户
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full flex items-center">
                                                                <i class="fa fa-circle-o mr-1"></i>未关联
                                                            </span>
                                                        </div>
                                                        
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step2" class="mr-3 h-4 w-4 text-primary rounded border-neutral-300">
                                                                <label for="step2" class="text-sm text-neutral-700 cursor-pointer">
                                                                    步骤: 设置自动转存规则
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full flex items-center">
                                                                <i class="fa fa-circle-o mr-1"></i>未关联
                                                            </span>
                                                        </div>
                                                        
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step3" disabled class="mr-3 h-4 w-4 text-primary rounded border-neutral-300 opacity-50">
                                                                <label for="step3" class="text-sm text-neutral-700 cursor-not-allowed opacity-75">
                                                                    步骤: 利息计算与发放
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full flex items-center">
                                                                <i class="fa fa-check-circle mr-1"></i>已关联
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                                
                                                <div class="border-l-4 border-warning pl-3">
                                                    <h6 class="font-medium text-neutral-600 flex items-center">
                                                        <i class="fa fa-tasks text-warning mr-2"></i>
                                                        任务: 存款产品推荐
                                                    </h6>
                                                    
                                                    <!-- 步骤层 -->
                                                    <div class="ml-4 mt-1 space-y-1">
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step4" class="mr-3 h-4 w-4 text-primary rounded border-neutral-300">
                                                                <label for="step4" class="text-sm text-neutral-700 cursor-pointer">
                                                                    步骤: 客户需求分析
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full flex items-center">
                                                                <i class="fa fa-circle-o mr-1"></i>未关联
                                                            </span>
                                                        </div>
                                                        
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step5" class="mr-3 h-4 w-4 text-primary rounded border-neutral-300">
                                                                <label for="step5" class="text-sm text-neutral-700 cursor-pointer">
                                                                    步骤: 智能产品匹配
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full flex items-center">
                                                                <i class="fa fa-circle-o mr-1"></i>未关联
                                                            </span>
                                                        </div>
                                                        
                                                        <div class="flex items-center justify-between p-2 bg-white rounded border hover:border-primary/30 transition-all-300">
                                                            <div class="flex items-center">
                                                                <input type="checkbox" id="step6" class="mr-3 h-4 w-4 text-primary rounded border-neutral-300">
                                                                <label for="step6" class="text-sm text-neutral-700 cursor-pointer">
                                                                    步骤: 推荐结果展示
                                                                </label>
                                                            </div>
                                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full flex items-center">
                                                                <i class="fa fa-circle-o mr-1"></i>未关联
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 操作统计信息 -->
                    <div class="mb-4">
                        <div class="grid grid-cols-3 gap-3">
                            <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-3 text-center">
                                <div class="text-2xl font-bold text-neutral-700" id="totalSteps">6</div>
                                <div class="text-sm text-neutral-500">总步骤数</div>
                            </div>
                            <div class="bg-success-50 border border-success-200 rounded-lg p-3 text-center">
                                <div class="text-2xl font-bold text-success" id="linkedSteps">1</div>
                                <div class="text-sm text-success">已关联</div>
                            </div>
                            <div class="bg-danger-50 border border-danger-200 rounded-lg p-3 text-center">
                                <div class="text-2xl font-bold text-danger" id="unlinkedSteps">5</div>
                                <div class="text-sm text-danger">待关联</div>
                            </div>
                        </div>
                    </div>

                    <!-- 批量操作区域 -->
                    <div class="mb-3">
                        <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                            <div class="flex items-center justify-between mb-2">
                                <h4 class="font-medium text-neutral-800">批量操作</h4>
                                <div class="flex space-x-2">
                                    <button id="selectAllBtn" class="text-sm text-primary hover:underline">
                                        全选未关联
                                    </button>
                                    <span class="text-neutral-300">|</span>
                                    <button id="clearAllBtn" class="text-sm text-neutral-500 hover:underline">
                                        清空选择
                                    </button>
                                </div>
                            </div>
                            <div class="flex items-center text-sm text-neutral-600">
                                <i class="fa fa-info-circle text-primary mr-2"></i>
                                已选择 <span id="selectedCount" class="font-medium text-primary">0</span> 个步骤，将自动生成对应的测试用例
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态对话框底部 -->
            <div class="p-4 border-t border-neutral-200 bg-neutral-50 flex-shrink-0">
                <div class="flex flex-col gap-3">
                    <!-- 提示文字 -->
                    <div class="text-sm text-neutral-500">
                        系统将根据选定的模型元素自动生成标准化测试用例
                    </div>
                    <!-- 按钮组 -->
                    <div class="flex flex-col sm:flex-row gap-3 justify-end">
                        <button id="cancelBtn" class="w-full sm:w-auto px-4 py-2.5 border border-neutral-200 rounded-md text-neutral-700 bg-white hover:bg-neutral-50 transition-all-300 text-center cursor-pointer">
                            取消
                        </button>
                        <button id="recommendTestCaseBtn" class="w-full sm:w-auto px-4 py-2.5 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-all-300 flex items-center justify-center whitespace-nowrap cursor-pointer">
                            <i class="fa fa-lightbulb-o mr-2"></i>
                            <span>测试用例智能推荐</span>
                        </button>
                        <button id="createSelectedBtn" class="w-full sm:w-auto px-4 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center justify-center whitespace-nowrap cursor-pointer">
                            <i class="fa fa-magic mr-2"></i>
                            <span>一键创建测试用例</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 测试用例智能推荐模态框 -->
    <div id="recommendTestCaseModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
            <!-- 模态框头部 -->
            <div class="flex justify-between items-center p-4 border-b border-neutral-200">
                <div>
                    <h2 class="text-xl font-bold text-neutral-800">测试用例智能推荐</h2>
                    <p class="text-sm text-neutral-500 mt-1">基于模型变更清单自动生成测试用例建议</p>
                </div>
                <button id="closeRecommendModal" class="text-neutral-400 hover:text-neutral-600 transition-all-300">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <!-- 模态框内容 -->
            <div class="overflow-y-auto max-h-[calc(90vh-120px)] p-4">
                <div class="mb-4">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                        <div class="flex items-start">
                            <div class="w-8 h-8 bg-secondary/10 rounded-lg flex items-center justify-center text-secondary mr-3 flex-shrink-0">
                                <i class="fa fa-lightbulb-o"></i>
                            </div>
                            <div class="flex-1">
                                <h4 class="font-medium text-neutral-800">智能推荐说明</h4>
                                <p class="text-sm text-neutral-600 mt-1">系统已根据当前模型变更清单中的业务领域、价值流、活动、任务等层级结构，为您生成了相关的测试用例建议。请勾选需要创建的测试用例，然后点击"生成选中用例"按钮。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 推荐的测试用例列表 -->
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-list text-secondary mr-2"></i>
                        推荐测试用例清单
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                        <div class="space-y-3" id="recommendTestCaseList">
                            <!-- 推荐的测试用例项将在这里动态生成 -->
                        </div>
                    </div>
                </div>

                <!-- 批量操作区域 -->
                <div class="mb-4">
                    <div class="bg-blue-50 border border-blue-200 rounded-lg p-3">
                        <div class="flex items-center justify-between mb-2">
                            <h4 class="font-medium text-neutral-800">批量操作</h4>
                            <div class="flex space-x-2">
                                <button id="selectAllRecommendBtn" class="text-sm text-secondary hover:underline">
                                    全选
                                </button>
                                <span class="text-neutral-300">|</span>
                                <button id="clearAllRecommendBtn" class="text-sm text-neutral-500 hover:underline">
                                    清空选择
                                </button>
                            </div>
                        </div>
                        <div class="flex items-center text-sm text-neutral-600">
                            <i class="fa fa-info-circle text-secondary mr-2"></i>
                            已选择 <span id="selectedRecommendCount" class="font-medium text-secondary">0</span> 个测试用例建议
                        </div>
                    </div>
                </div>
            </div>

            <!-- 模态框底部 -->
            <div class="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-3 p-4 border-t border-neutral-200 bg-neutral-50">
                <div class="text-sm text-neutral-500">
                    智能推荐基于模型元素自动生成测试用例建议
                </div>
                <div class="flex flex-col sm:flex-row gap-3">
                    <button id="cancelRecommendBtn" class="px-4 py-2 border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-100 transition-all-300">
                        取消
                    </button>
                    <button id="generateSelectedRecommendBtn" class="px-4 py-2 bg-secondary text-white rounded-md hover:bg-secondary/90 transition-all-300 flex items-center">
                        <i class="fa fa-magic mr-2"></i>生成选中用例
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 创建成功提示模态框 -->
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center text-success mx-auto mb-4">
                    <i class="fa fa-check-circle text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-neutral-800 mb-2">创建成功！</h3>
                <p class="text-sm text-neutral-600 mb-4">
                    已成功创建 <span id="createdCount" class="font-medium text-primary">0</span> 个测试用例
                </p>
                <button id="closeSuccessModal" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                    确定
                </button>
            </div>
        </div>
    </div>

    <!-- 制品包详情模态框 -->
    <div id="artifactDetailModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-6xl w-full max-h-[90vh] overflow-hidden">
            <!-- 模态框头部 -->
            <div class="flex justify-between items-center p-6 border-b border-neutral-200">
                <div>
                    <h2 class="text-xl font-bold text-neutral-800">制品包详情</h2>
                    <p class="text-sm text-neutral-500 mt-1" id="artifactNameTitle">ipdo-v2.1.0</p>
                </div>
                <button id="closeArtifactModal" class="text-neutral-400 hover:text-neutral-600 transition-all-300">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            
            <!-- 快速操作区域 -->
            <div class="px-6 py-4 bg-gradient-to-r from-primary/5 to-secondary/5 border-b border-neutral-200">
                <div class="flex justify-between items-center">
                    <div class="text-sm text-neutral-600">
                        <i class="fa fa-info-circle text-primary mr-2"></i>
                        请仔细检查制品包信息后再进行部署操作
                    </div>
                    <button id="deployArtifactBtn" class="px-5 py-2.5 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300 flex items-center shadow-md hover:shadow-lg">
                        <i class="fa fa-rocket mr-2"></i>部署此制品
                    </button>
                </div>
            </div>

            <!-- 模态框内容 -->
            <div class="overflow-y-auto max-h-[calc(90vh-80px)] p-6">
                <!-- 基本信息 -->
                <div class="mb-6">
                    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                        <div class="bg-neutral-50 p-4 rounded-lg">
                            <p class="text-xs text-neutral-500 mb-1">制品版本</p>
                            <p class="font-semibold text-neutral-800" id="artifactVersion">v2.1.0</p>
                        </div>
                        <div class="bg-neutral-50 p-4 rounded-lg">
                            <p class="text-xs text-neutral-500 mb-1">集成时间</p>
                            <p class="font-semibold text-neutral-800" id="artifactTime">2024-01-15 10:30</p>
                        </div>
                        <div class="bg-neutral-50 p-4 rounded-lg">
                            <p class="text-xs text-neutral-500 mb-1">发布单元</p>
                            <p class="font-semibold text-neutral-800" id="artifactUnits">8个</p>
                        </div>
                        <div class="bg-neutral-50 p-4 rounded-lg">
                            <p class="text-xs text-neutral-500 mb-1">测试状态</p>
                            <p class="font-semibold text-success" id="artifactStatus">集成测试通过</p>
                        </div>
                    </div>
                </div>

                <!-- 关联的业务特性清单 -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-star text-warning mr-2"></i>
                        关联的业务特性清单
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                        <div class="space-y-3" id="featureList">
                            <!-- 业务特性项 -->
                            <div class="flex items-start p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-8 h-8 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                    <i class="fa fa-lightbulb-o"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-neutral-800">FEA-001: 定期存款自动转存功能</h4>
                                    <p class="text-sm text-neutral-600 mt-1">实现定期存款到期后自动转存的业务功能，支持灵活配置转存规则</p>
                                    <div class="flex items-center mt-2 text-xs text-neutral-500">
                                        <span class="mr-3"><i class="fa fa-user mr-1"></i>负责人: 李四</span>
                                        <span class="px-2 py-1 bg-success/10 text-success rounded-full">已完成</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex items-start p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-8 h-8 bg-secondary/10 rounded-md flex items-center justify-center text-secondary mr-3 flex-shrink-0">
                                    <i class="fa fa-calculator"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-neutral-800">FEA-002: 利息计算优化</h4>
                                    <p class="text-sm text-neutral-600 mt-1">优化存款利息计算算法，提高计算精度和性能</p>
                                    <div class="flex items-center mt-2 text-xs text-neutral-500">
                                        <span class="mr-3"><i class="fa fa-user mr-1"></i>负责人: 王五</span>
                                        <span class="px-2 py-1 bg-success/10 text-success rounded-full">已完成</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="flex items-start p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3 flex-shrink-0">
                                    <i class="fa fa-gift"></i>
                                </div>
                                <div class="flex-1">
                                    <h4 class="font-medium text-neutral-800">FEA-003: 存款产品推荐</h4>
                                    <p class="text-sm text-neutral-600 mt-1">基于客户画像和需求分析，智能推荐合适的存款产品</p>
                                    <div class="flex items-center mt-2 text-xs text-neutral-500">
                                        <span class="mr-3"><i class="fa fa-user mr-1"></i>负责人: 赵六</span>
                                        <span class="px-2 py-1 bg-success/10 text-success rounded-full">已完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 关联系统组件清单 -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-cubes text-primary mr-2"></i>
                        关联系统发布单元清单
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3" id="componentList">
                            <!-- 组件项 -->
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-primary/10 rounded-md flex items-center justify-center text-primary mr-3">
                                    <i class="fa fa-database"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-DB</h4>
                                    <p class="text-xs text-neutral-500">数据库服务</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3">
                                    <i class="fa fa-server"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-SERVER</h4>
                                    <p class="text-xs text-neutral-500">后端服务</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-secondary/10 rounded-md flex items-center justify-center text-secondary mr-3">
                                    <i class="fa fa-mobile"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-APP</h4>
                                    <p class="text-xs text-neutral-500">移动应用</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-success/10 rounded-md flex items-center justify-center text-success mr-3">
                                    <i class="fa fa-desktop"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-WEB</h4>
                                    <p class="text-xs text-neutral-500">Web前端</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-danger/10 rounded-md flex items-center justify-center text-danger mr-3">
                                    <i class="fa fa-refresh"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-BATCH</h4>
                                    <p class="text-xs text-neutral-500">批处理服务</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-purple-500/10 rounded-md flex items-center justify-center text-purple-600 mr-3">
                                    <i class="fa fa-exchange"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-FEX</h4>
                                    <p class="text-xs text-neutral-500">外部适配器</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-pink-500/10 rounded-md flex items-center justify-center text-pink-600 mr-3">
                                    <i class="fa fa-sitemap"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-PROCESS</h4>
                                    <p class="text-xs text-neutral-500">流程服务</p>
                                </div>
                            </div>
                            
                            <div class="flex items-center p-3 bg-white rounded-md border border-neutral-200">
                                <div class="w-10 h-10 bg-green-500/10 rounded-md flex items-center justify-center text-green-600 mr-3">
                                    <i class="fa fa-cloud"></i>
                                </div>
                                <div>
                                    <h4 class="font-medium text-neutral-800">IPDO-API</h4>
                                    <p class="text-xs text-neutral-500">API服务</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 模型变更清单 -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-code-fork text-warning mr-2"></i>
                        模型变更清单
                    </h3>
                    
                    <!-- 服务组件清单 -->
                    <div class="mb-4">
                        <h4 class="text-md font-semibold text-neutral-700 mb-3 flex items-center">
                            <i class="fa fa-server text-secondary mr-2"></i>
                            服务组件清单 (Service Components)
                        </h4>
                        <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                            <div class="space-y-2">
                                <!-- 新增服务组件 -->
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-success">
                                    <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3 flex-shrink-0">
                                        <i class="fa fa-plus-circle"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">RecommendationService</h5>
                                            <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">新增</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">存款产品智能推荐服务组件</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cube mr-1"></i>类型: 业务服务</span>
                                            <span><i class="fa fa-code mr-1"></i>技术栈: Java Spring Boot</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 修改服务组件 -->
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-warning">
                                    <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3 flex-shrink-0">
                                        <i class="fa fa-refresh"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">DepositService</h5>
                                            <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">修改</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">存款核心业务服务组件 - 优化利息计算逻辑</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cube mr-1"></i>类型: 核心服务</span>
                                            <span class="mr-3"><i class="fa fa-code mr-1"></i>技术栈: Java Spring Boot</span>
                                            <span class="text-warning"><i class="fa fa-exclamation-triangle mr-1"></i>涉及核心接口变更</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-warning">
                                    <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3 flex-shrink-0">
                                        <i class="fa fa-refresh"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">AccountService</h5>
                                            <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">修改</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">账户管理服务组件 - 增加自动转存规则配置</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cube mr-1"></i>类型: 业务服务</span>
                                            <span><i class="fa fa-code mr-1"></i>技术栈: Java Spring Boot</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 单元组件清单 -->
                    <div>
                        <h4 class="text-md font-semibold text-neutral-700 mb-3 flex items-center">
                            <i class="fa fa-puzzle-piece text-primary mr-2"></i>
                            单元组件清单 (Unit Components)
                        </h4>
                        <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                            <div class="space-y-2">
                                <!-- 新增单元组件 -->
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-success">
                                    <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3 flex-shrink-0">
                                        <i class="fa fa-plus-circle"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">ProductRecommendationEngine</h5>
                                            <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">新增</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">产品推荐算法引擎单元</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cog mr-1"></i>类型: 算法单元</span>
                                            <span><i class="fa fa-link mr-1"></i>依赖: RecommendationService</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-success">
                                    <div class="w-8 h-8 bg-success/10 rounded-md flex items-center justify-center text-success mr-3 flex-shrink-0">
                                        <i class="fa fa-plus-circle"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">CustomerProfileAnalyzer</h5>
                                            <span class="text-xs px-2 py-1 bg-success/10 text-success rounded-full">新增</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">客户画像分析单元</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cog mr-1"></i>类型: 分析单元</span>
                                            <span><i class="fa fa-link mr-1"></i>依赖: RecommendationService</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 修改单元组件 -->
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-warning">
                                    <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3 flex-shrink-0">
                                        <i class="fa fa-refresh"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">InterestCalculator</h5>
                                            <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">修改</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">利息计算器单元 - 优化计算精度和性能</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cog mr-1"></i>类型: 计算单元</span>
                                            <span><i class="fa fa-link mr-1"></i>依赖: DepositService</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-warning">
                                    <div class="w-8 h-8 bg-warning/10 rounded-md flex items-center justify-center text-warning mr-3 flex-shrink-0">
                                        <i class="fa fa-refresh"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800">AutoRenewalRuleEngine</h5>
                                            <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">修改</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">自动转存规则引擎单元 - 增加灵活配置能力</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cog mr-1"></i>类型: 规则引擎</span>
                                            <span><i class="fa fa-link mr-1"></i>依赖: AccountService</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <!-- 删除单元组件 -->
                                <div class="flex items-start p-3 bg-white rounded-md border-l-4 border-danger">
                                    <div class="w-8 h-8 bg-danger/10 rounded-md flex items-center justify-center text-danger mr-3 flex-shrink-0">
                                        <i class="fa fa-times-circle"></i>
                                    </div>
                                    <div class="flex-1">
                                        <div class="flex items-center justify-between">
                                            <h5 class="font-medium text-neutral-800 line-through">LegacyInterestCalculator</h5>
                                            <span class="text-xs px-2 py-1 bg-danger/10 text-danger rounded-full">删除</span>
                                        </div>
                                        <p class="text-sm text-neutral-600 mt-1">旧版利息计算器单元 - 已被新版本替代</p>
                                        <div class="mt-2 text-xs text-neutral-500">
                                            <span class="mr-3"><i class="fa fa-cog mr-1"></i>类型: 计算单元</span>
                                            <span class="text-danger"><i class="fa fa-warning mr-1"></i>请确保已迁移所有依赖</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 统计信息 -->
                            <div class="mt-4 pt-4 border-t border-neutral-200">
                                <div class="grid grid-cols-3 gap-3">
                                    <div class="text-center p-2 bg-success/5 rounded">
                                        <div class="text-lg font-bold text-success">3</div>
                                        <div class="text-xs text-neutral-600">新增组件</div>
                                    </div>
                                    <div class="text-center p-2 bg-warning/5 rounded">
                                        <div class="text-lg font-bold text-warning">5</div>
                                        <div class="text-xs text-neutral-600">修改组件</div>
                                    </div>
                                    <div class="text-center p-2 bg-danger/5 rounded">
                                        <div class="text-lg font-bold text-danger">1</div>
                                        <div class="text-xs text-neutral-600">删除组件</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 环境参数差异清单 -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-exchange text-secondary mr-2"></i>
                        环境参数差异清单
                    </h3>
                    
                    <!-- Pod数量对比 -->
                    <div class="mb-4">
                        <h4 class="text-md font-semibold text-neutral-700 mb-3 flex items-center">
                            <i class="fa fa-cubes text-primary mr-2"></i>
                            Pod数量对比
                        </h4>
                        <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                                <!-- 开发环境 -->
                                <div class="bg-white rounded-lg p-4 border-2 border-blue-200">
                                    <div class="text-center">
                                        <div class="text-xs text-neutral-500 mb-2">开发环境</div>
                                        <div class="flex items-center justify-center mb-2">
                                            <i class="fa fa-cube text-blue-500 text-2xl"></i>
                                            <i class="fa fa-cube text-blue-500 text-2xl ml-2"></i>
                                        </div>
                                        <div class="text-3xl font-bold text-blue-600">2</div>
                                        <div class="text-xs text-neutral-500 mt-1">Pods</div>
                                    </div>
                                </div>
                                
                                <!-- 箭头指示 -->
                                <div class="flex items-center justify-center">
                                    <div class="text-center">
                                        <i class="fa fa-arrow-right text-neutral-400 text-2xl"></i>
                                        <div class="text-xs text-neutral-500 mt-2">部署到</div>
                                    </div>
                                </div>
                                
                                <!-- 测试环境 -->
                                <div class="bg-white rounded-lg p-4 border-2 border-green-200">
                                    <div class="text-center">
                                        <div class="text-xs text-neutral-500 mb-2">测试环境</div>
                                        <div class="flex items-center justify-center mb-2">
                                            <i class="fa fa-cube text-green-500 text-2xl"></i>
                                            <i class="fa fa-cube text-green-500 text-2xl ml-2"></i>
                                            <i class="fa fa-cube text-green-500 text-2xl ml-2"></i>
                                        </div>
                                        <div class="text-3xl font-bold text-green-600">3</div>
                                        <div class="text-xs text-neutral-500 mt-1">Pods</div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 差异提示 -->
                            <div class="mt-4 p-3 bg-warning/10 border border-warning/30 rounded-lg">
                                <div class="flex items-center text-sm">
                                    <i class="fa fa-info-circle text-warning mr-2"></i>
                                    <span class="text-neutral-700">
                                        测试环境Pod数量增加 <span class="font-semibold text-green-600">+1</span>，以支持更高的并发访问量和系统稳定性
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 环境Key值对比 -->
                    <div>
                        <h4 class="text-md font-semibold text-neutral-700 mb-3 flex items-center">
                            <i class="fa fa-key text-warning mr-2"></i>
                            环境Key值对比
                        </h4>
                        <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                            <!-- 表格头部 -->
                            <div class="grid grid-cols-3 gap-3 mb-3 pb-3 border-b border-neutral-300">
                                <div class="text-xs font-semibold text-neutral-600 uppercase">配置Key</div>
                                <div class="text-xs font-semibold text-neutral-600 uppercase text-center">开发环境Value</div>
                                <div class="text-xs font-semibold text-neutral-600 uppercase text-center">测试环境Value</div>
                            </div>
                            
                            <!-- 配置项对比列表 -->
                            <div class="space-y-2">
                                <!-- 配置项1 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">DATABASE_POOL_SIZE</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">10</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">20</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项2 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">CACHE_EXPIRE_TIME</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">300s</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">600s</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项3 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">LOG_LEVEL</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">DEBUG</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">INFO</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项4 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">MAX_CONCURRENT_REQUESTS</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">100</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">200</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项5 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">RECOMMEND_SERVICE_URL</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">http://dev-recommend:8080</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">http://test-recommend:8080</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项6 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">ENABLE_FEATURE_FLAG</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">false</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">true</span>
                                    </div>
                                </div>
                                
                                <!-- 配置项7 -->
                                <div class="grid grid-cols-3 gap-3 p-3 bg-white rounded-lg border border-neutral-200 hover:border-primary/30 transition-all-300">
                                    <div class="flex items-center">
                                        <i class="fa fa-cog text-primary mr-2"></i>
                                        <span class="text-sm font-medium text-neutral-800">SESSION_TIMEOUT</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-blue-50 text-blue-700 rounded text-sm font-mono">1800s</span>
                                    </div>
                                    <div class="text-center">
                                        <span class="px-3 py-1 bg-green-50 text-green-700 rounded text-sm font-mono">3600s</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 统计信息 -->
                            <div class="mt-4 pt-4 border-t border-neutral-200">
                                <div class="flex items-center justify-between text-sm">
                                    <div class="text-neutral-600">
                                        <i class="fa fa-info-circle text-primary mr-2"></i>
                                        共有 <span class="font-semibold text-primary">7</span> 个配置项在两个环境中存在差异
                                    </div>
                                    <button class="text-primary hover:text-primary/80 text-xs">
                                        <i class="fa fa-download mr-1"></i>导出差异报告
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统部署流程图 -->
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-sitemap text-secondary mr-2"></i>
                        系统部署流程图
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-6">
                        <div class="mb-4">
                            <h4 class="font-medium text-neutral-700 mb-2">部署流程说明</h4>
                            <p class="text-sm text-neutral-600">本流程图展示IPDO系统的完整部署过程，包含8个发布单元，按指定顺序执行，部分单元支持并行部署以提高效率。</p>
                        </div>
                        <div class="flowchart-container overflow-x-auto" style="min-height: 300px;">
                            <!-- 流程图表 -->
                            <svg class="w-full" viewBox="0 0 850 250">
                                <!-- 连接线 -->
                                <defs>
                                    <marker id="arrowhead-detail" markerWidth="8" markerHeight="6" refX="7" refY="3" orient="auto">
                                        <polygon points="0 0, 8 3, 0 6" fill="#64748b" />
                                    </marker>
                                </defs>
                                <!-- 开始节点 -->
                                <rect x="30" y="120" width="80" height="40" rx="4" fill="#f8fafc" stroke="#3b82f6" stroke-width="1.5" />
                                <text x="70" y="145" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="12">开始</text>
                                
                                <!-- DB节点 -->
                                <rect x="150" y="120" width="80" height="40" rx="4" fill="#f0fdfa" stroke="#0d9488" stroke-width="1.5" />
                                <text x="190" y="142" text-anchor="middle" fill="#065f46" font-weight="bold" font-size="11">DB</text>
                                <text x="190" y="156" text-anchor="middle" fill="#065f46" font-size="8">IPDO-DB</text>
                                
                                <!-- SERVER节点 -->
                                <rect x="270" y="120" width="80" height="40" rx="4" fill="#fef3c7" stroke="#d97706" stroke-width="1.5" />
                                <text x="310" y="142" text-anchor="middle" fill="#92400e" font-weight="bold" font-size="11">SERVER</text>
                                <text x="310" y="156" text-anchor="middle" fill="#92400e" font-size="8">IPDO-SERVER</text>
                                
                                <!-- 并行部署提示 -->
                                <text x="390" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                                
                                <!-- APP节点 -->
                                <rect x="390" y="60" width="80" height="40" rx="4" fill="#e0f2fe" stroke="#0284c7" stroke-width="1.5" />
                                <text x="430" y="82" text-anchor="middle" fill="#0369a1" font-weight="bold" font-size="11">APP</text>
                                <text x="430" y="96" text-anchor="middle" fill="#0369a1" font-size="8">IPDO-APP</text>
                                
                                <!-- WEB节点 -->
                                <rect x="390" y="120" width="80" height="40" rx="4" fill="#dbeafe" stroke="#3b82f6" stroke-width="1.5" />
                                <text x="430" y="142" text-anchor="middle" fill="#1e40af" font-weight="bold" font-size="11">WEB</text>
                                <text x="430" y="156" text-anchor="middle" fill="#1e40af" font-size="8">IPDO-WEB</text>
                                
                                <!-- BATCH节点 -->
                                <rect x="390" y="180" width="80" height="40" rx="4" fill="#fce7f3" stroke="#db2777" stroke-width="1.5" />
                                <text x="430" y="202" text-anchor="middle" fill="#9d174d" font-weight="bold" font-size="11">BATCH</text>
                                <text x="430" y="216" text-anchor="middle" fill="#9d174d" font-size="8">IPDO-BATCH</text>
                                
                                <!-- FEX节点 -->
                                <rect x="510" y="120" width="80" height="40" rx="4" fill="#ede9fe" stroke="#8b5cf6" stroke-width="1.5" />
                                <text x="550" y="142" text-anchor="middle" fill="#5b21b6" font-weight="bold" font-size="11">FEX</text>
                                <text x="550" y="156" text-anchor="middle" fill="#5b21b6" font-size="8">IPDO-FEX</text>
                                
                                <!-- 并行部缦2 -->
                                <text x="630" y="80" text-anchor="middle" fill="#64748b" font-size="10" font-style="italic">并行部署</text>
                                
                                <!-- PROCESS节点 -->
                                <rect x="630" y="60" width="80" height="40" rx="4" fill="#fef2f2" stroke="#ef4444" stroke-width="1.5" />
                                <text x="670" y="82" text-anchor="middle" fill="#b91c1c" font-weight="bold" font-size="11">PROCESS</text>
                                <text x="670" y="96" text-anchor="middle" fill="#b91c1c" font-size="8">IPDO-PROCESS</text>
                                
                                <!-- API节点 -->
                                <rect x="630" y="120" width="80" height="40" rx="4" fill="#dcfce7" stroke="#22c55e" stroke-width="1.5" />
                                <text x="670" y="142" text-anchor="middle" fill="#15803d" font-weight="bold" font-size="11">API</text>
                                <text x="670" y="156" text-anchor="middle" fill="#15803d" font-size="8">IPDO-API</text>
                                
                                <!-- 结束节点 -->
                                <rect x="750" y="90" width="80" height="40" rx="4" fill="#f8fafc" stroke="#64748b" stroke-width="1.5" />
                                <text x="790" y="115" text-anchor="middle" fill="#334155" font-weight="bold" font-size="12">结束</text>
                                
                                <!-- 连接线 - 水平主流程 -->
                                <line x1="110" y1="140" x2="150" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="230" y1="140" x2="270" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="470" y1="140" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="710" y1="80" x2="750" y2="110" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="710" y1="140" x2="750" y2="130" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                
                                <!-- SERVER到并行节点的连接线 -->
                                <line x1="350" y1="140" x2="390" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="350" y1="140" x2="390" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="350" y1="140" x2="390" y2="200" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                
                                <!-- 并行节点到FEX的连接线 -->
                                <line x1="470" y1="80" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="470" y1="200" x2="510" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                
                                <!-- FEX到并行节点的连接线 -->
                                <line x1="590" y1="140" x2="630" y2="80" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                <line x1="590" y1="140" x2="630" y2="140" stroke="#64748b" stroke-width="1.5" marker-end="url(#arrowhead-detail)" />
                                
                                <!-- 虚线连接 -->
                                <line x1="470" y1="80" x2="470" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" />
                                <line x1="470" y1="140" x2="470" y2="200" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" />
                                <line x1="710" y1="80" x2="710" y2="140" stroke="#64748b" stroke-width="1" stroke-dasharray="4,3" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 部署确认模态框 -->
    <div id="deployConfirmModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-[90vh] overflow-hidden">
            <!-- 模态框头部 -->
            <div class="flex justify-between items-center p-6 border-b border-neutral-200">
                <div>
                    <h2 class="text-xl font-bold text-neutral-800">部署确认</h2>
                    <p class="text-sm text-neutral-500 mt-1" id="deployConfirmTitle">确认部署 ipdo-v2.1.0 到测试环境A</p>
                </div>
                <button id="closeDeployConfirmModal" class="text-neutral-400 hover:text-neutral-600 transition-all-300">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>

            <!-- 模态框内容 -->
            <div class="overflow-y-auto max-h-[calc(90vh-140px)] p-6">
                <!-- 部署确认信息 -->
                <div class="mb-6">
                    <div class="bg-warning/10 border border-warning/30 rounded-lg p-4">
                        <div class="flex items-start">
                            <div class="w-10 h-10 bg-warning/20 rounded-full flex items-center justify-center text-warning mr-4 flex-shrink-0">
                                <i class="fa fa-exclamation-triangle"></i>
                            </div>
                            <div class="flex-1">
                                <h3 class="font-semibold text-neutral-800 mb-2">部署确认提示</h3>
                                <p class="text-sm text-neutral-700">
                                    您即将将 <span class="font-semibold text-primary" id="deployVersion">ipdo-v2.1.0</span> 部署到 
                                    <span class="font-semibold text-secondary" id="deployEnvironment">测试环境A (TRA)</span>。
                                    请仔细检查以下信息并确认无误后再进行部署。
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 版本差异清单 -->
                <div class="mb-6">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-code-fork text-primary mr-2"></i>
                        版本差异清单
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                            <div class="text-center">
                                <div class="text-sm text-neutral-500 mb-1">当前版本</div>
                                <div class="text-lg font-bold text-neutral-700" id="currentVersion">v2.0.5</div>
                            </div>
                            <div class="text-center">
                                <div class="text-sm text-neutral-500 mb-1">目标版本</div>
                                <div class="text-lg font-bold text-primary" id="targetVersion">v2.1.0</div>
                            </div>
                        </div>
                        
                        <div class="space-y-3">
                            <h4 class="font-medium text-neutral-700">变更内容:</h4>
                            
                            <!-- 新增组件 -->
                            <div class="border-l-4 border-success pl-3">
                                <h5 class="text-sm font-semibold text-success mb-2">新增组件</h5>
                                <div class="space-y-1">
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-plus-circle text-success mr-2"></i>
                                        <span>IPDO-RECOMMEND - 存款产品推荐服务</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 更新组件 -->
                            <div class="border-l-4 border-warning pl-3">
                                <h5 class="text-sm font-semibold text-warning mb-2">更新组件</h5>
                                <div class="space-y-1">
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-refresh text-warning mr-2"></i>
                                        <span>IPDO-SERVER - 后端服务核心逻辑更新</span>
                                    </div>
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-refresh text-warning mr-2"></i>
                                        <span>IPDO-WEB - 前端界面优化及新功能添加</span>
                                    </div>
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-refresh text-warning mr-2"></i>
                                        <span>IPDO-DB - 数据库结构优化和新表添加</span>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 配置变更 -->
                            <div class="border-l-4 border-secondary pl-3">
                                <h5 class="text-sm font-semibold text-secondary mb-2">配置变更</h5>
                                <div class="space-y-1">
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-cog text-secondary mr-2"></i>
                                        <span>新增环境变量: RECOMMEND_SERVICE_URL</span>
                                    </div>
                                    <div class="flex items-center text-sm text-neutral-600">
                                        <i class="fa fa-cog text-secondary mr-2"></i>
                                        <span>更新数据库连接池配置</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 待执行测试用例清单 -->
                <div class="mb-4">
                    <h3 class="text-lg font-semibold text-neutral-800 mb-3 flex items-center">
                        <i class="fa fa-warning text-warning mr-2"></i>
                        待执行测试用例清单
                    </h3>
                    <div class="bg-neutral-50 border border-neutral-200 rounded-lg p-4">
                        <div class="mb-3">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-neutral-600">当前环境仍有 <span class="font-semibold text-warning" id="pendingTestCount">7</span> 个测试用例尚未执行</span>
                                <span class="text-xs text-neutral-500">建议在部署前先完成测试</span>
                            </div>
                        </div>
                        
                        <div class="space-y-2 max-h-48 overflow-y-auto">
                            <div class="flex items-center justify-between p-2 bg-white rounded border border-neutral-200">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-warning/10 rounded flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-clock-o text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-neutral-700">TC-DEP-001: 定期存款自动转存功能测试</div>
                                        <div class="text-xs text-neutral-500">高优先级</div>
                                    </div>
                                </div>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">待执行</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-2 bg-white rounded border border-neutral-200">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-warning/10 rounded flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-clock-o text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-neutral-700">TC-DEP-002: 利息计算优化验证测试</div>
                                        <div class="text-xs text-neutral-500">中优先级</div>
                                    </div>
                                </div>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">待执行</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-2 bg-white rounded border border-neutral-200">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-warning/10 rounded flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-clock-o text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-neutral-700">TC-DEP-003: 存款产品推荐算法测试</div>
                                        <div class="text-xs text-neutral-500">高优先级</div>
                                    </div>
                                </div>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">待执行</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-2 bg-white rounded border border-neutral-200">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-warning/10 rounded flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-clock-o text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-neutral-700">TC-DEP-004: API接口兼容性测试</div>
                                        <div class="text-xs text-neutral-500">中优先级</div>
                                    </div>
                                </div>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">待执行</span>
                            </div>
                            
                            <div class="flex items-center justify-between p-2 bg-white rounded border border-neutral-200">
                                <div class="flex items-center">
                                    <div class="w-6 h-6 bg-warning/10 rounded flex items-center justify-center text-warning mr-3">
                                        <i class="fa fa-clock-o text-xs"></i>
                                    </div>
                                    <div>
                                        <div class="text-sm font-medium text-neutral-700">TC-DEP-005: 数据库性能压力测试</div>
                                        <div class="text-xs text-neutral-500">低优先级</div>
                                    </div>
                                </div>
                                <span class="text-xs px-2 py-1 bg-warning/10 text-warning rounded-full">待执行</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 部署确认模态框底部 -->
            <div class="px-6 py-4 border-t border-neutral-200 bg-neutral-50 flex justify-between items-center">
                <div class="text-sm text-neutral-500">
                    请确认上述信息无误后再进行部署操作
                </div>
                <div class="flex space-x-3">
                    <button id="cancelConfirmDeployBtn" class="px-4 py-2 border border-neutral-200 rounded-md text-neutral-700 hover:bg-neutral-100 transition-all-300">
                        取消
                    </button>
                    <button id="confirmDeployBtn" class="px-4 py-2 bg-danger text-white rounded-md hover:bg-danger/90 transition-all-300 flex items-center">
                        <i class="fa fa-rocket mr-2"></i>确认部署
                    </button>
                </div>
            </div>
    <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex items-center justify-center p-4">
        <div class="bg-white rounded-lg shadow-xl max-w-md w-full">
            <div class="p-6 text-center">
                <div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center text-success mx-auto mb-4">
                    <i class="fa fa-check-circle text-2xl"></i>
                </div>
                <h3 class="text-lg font-semibold text-neutral-800 mb-2">创建成功！</h3>
                <p class="text-sm text-neutral-600 mb-4">
                    已成功创建 <span id="createdCount" class="font-medium text-primary">0</span> 个测试用例
                </p>
                <button id="closeSuccessModal" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-all-300">
                    确定
                </button>
            </div>
        </div>
    </div>

    <script>
        // 移动端菜单切换
        const menuToggle = document.getElementById('menuToggle');
        if (menuToggle) {
            menuToggle.addEventListener('click', function() {
                const sidebar = document.querySelector('aside');
                sidebar.classList.toggle('w-64');
                sidebar.classList.toggle('w-16');
            });
        }

        // ===== 制品包详情模态框管理 =====
        const artifactDetailModal = document.getElementById('artifactDetailModal');
        const closeArtifactModal = document.getElementById('closeArtifactModal');
        const artifactItems = document.querySelectorAll('.artifact-item');
        const deployArtifactBtn = document.getElementById('deployArtifactBtn');
        
        // ===== 部署确认模态框管理 =====
        const deployConfirmModal = document.getElementById('deployConfirmModal');
        const closeDeployConfirmModal = document.getElementById('closeDeployConfirmModal');
        const cancelConfirmDeployBtn = document.getElementById('cancelConfirmDeployBtn');
        const confirmDeployBtn = document.getElementById('confirmDeployBtn');
        
        let currentArtifact = '';
        let currentEnv = '';

        // 点击制品包项打开详情
        artifactItems.forEach(item => {
            item.addEventListener('click', function() {
                const artifactName = this.getAttribute('data-artifact');
                const envName = this.getAttribute('data-env');
                openArtifactDetail(artifactName, envName);
            });
        });

        // 打开制品包详情模态框
        function openArtifactDetail(artifactName, envName) {
            currentArtifact = artifactName;
            currentEnv = envName;
            
            // 更新模态框标题
            document.getElementById('artifactNameTitle').textContent = artifactName + ' (' + envName + ')';
            
            // 这里可以根据不同的制品包加载不同的数据
            // 目前使用静态数据演示
            
            artifactDetailModal.classList.remove('hidden');
            document.body.style.overflow = 'hidden';
        }

        // 关闭制品包详情模态框
        function closeArtifactDetailModal() {
            artifactDetailModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
        
        if (closeArtifactModal) {
            closeArtifactModal.addEventListener('click', closeArtifactDetailModal);
        }
        
        // 部署此制品按钮事件
        if (deployArtifactBtn) {
            deployArtifactBtn.addEventListener('click', function() {
                // 更新部署确认模态框信息
                document.getElementById('deployConfirmTitle').textContent = `确认部署 ${currentArtifact} 到${getEnvironmentName(currentEnv)}`;
                document.getElementById('deployVersion').textContent = currentArtifact;
                document.getElementById('deployEnvironment').textContent = `${getEnvironmentName(currentEnv)} (${currentEnv})`;
                
                // 更新版本差异信息
                updateVersionDiff(currentEnv, currentArtifact);
                
                // 更新待执行测试用例信息
                updatePendingTests(currentEnv);
                
                // 关闭当前模态框，打开确认模态框
                closeArtifactDetailModal();
                deployConfirmModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
            });
        }
        
        // ===== 部署确认模态框事件处理 =====
        
        // 关闭部署确认模态框
        function closeDeployConfirmModalFunc() {
            deployConfirmModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }
        
        if (closeDeployConfirmModal) {
            closeDeployConfirmModal.addEventListener('click', closeDeployConfirmModalFunc);
        }
        
        if (cancelConfirmDeployBtn) {
            cancelConfirmDeployBtn.addEventListener('click', closeDeployConfirmModalFunc);
        }
        
        // 确认部署按钮事件
        if (confirmDeployBtn) {
            confirmDeployBtn.addEventListener('click', function() {
                // 这里在实际应用中会调用部署API
                const button = this;
                const originalText = button.innerHTML;
                
                // 显示加载状态
                button.disabled = true;
                button.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>部署中...';
                
                // 模拟部署过程
                setTimeout(() => {
                    alert(`成功部署 ${currentArtifact} 到 ${getEnvironmentName(currentEnv)}!`);
                    
                    // 恢复按钮状态
                    button.disabled = false;
                    button.innerHTML = originalText;
                    
                    // 关闭模态框
                    closeDeployConfirmModalFunc();
                }, 2000);
            });
        }
        
        // 获取环境名称
        function getEnvironmentName(envCode) {
            const envNames = {
                'TRA': '测试环境A',
                'TRB': '测试环境B',
                'TP': '预生产环境'
            };
            return envNames[envCode] || envCode;
        }
        
        // 获取当前环境版本
        function getCurrentVersion(envCode) {
            const currentVersions = {
                'TRA': 'v2.1.0',
                'TRB': 'v2.0.5',
                'TP': 'v2.0.3'
            };
            return currentVersions[envCode] || 'v1.0.0';
        }
        
        // 更新版本差异信息
        function updateVersionDiff(envCode, targetArtifact) {
            const currentVer = getCurrentVersion(envCode);
            const targetVer = targetArtifact.match(/v\d+\.\d+\.\d+/)?.[0] || 'v2.1.0';
            
            document.getElementById('currentVersion').textContent = currentVer;
            document.getElementById('targetVersion').textContent = targetVer;
        }
        
        // 更新待执行测试用例信息
        function updatePendingTests(envCode) {
            const pendingCounts = {
                'TRA': 7,
                'TRB': 12,
                'TP': 30
            };
            document.getElementById('pendingTestCount').textContent = pendingCounts[envCode] || 0;
        }

        // 点击背景关闭模态框
        if (artifactDetailModal) {
            artifactDetailModal.addEventListener('click', function(e) {
                if (e.target === artifactDetailModal) {
                    closeArtifactDetailModal();
                }
            });
        }
        
        if (deployConfirmModal) {
            deployConfirmModal.addEventListener('click', function(e) {
                if (e.target === deployConfirmModal) {
                    closeDeployConfirmModalFunc();
                }
            });
        }

        // ===== 原有的模态对话框管理代码 =====
        const createTestCaseModal = document.getElementById('createTestCaseModal');
        const successModal = document.getElementById('successModal');
        const createTestCaseBtn = document.getElementById('createTestCaseBtn');
        const closeModal = document.getElementById('closeModal');
        const cancelBtn = document.getElementById('cancelBtn');
        const closeSuccessModal = document.getElementById('closeSuccessModal');
        const createSelectedBtn = document.getElementById('createSelectedBtn');
        const selectAllBtn = document.getElementById('selectAllBtn');
        const clearAllBtn = document.getElementById('clearAllBtn');

        // 步骤复选框
        const stepCheckboxes = document.querySelectorAll('input[type="checkbox"]:not([disabled])');
        const selectedCountElement = document.getElementById('selectedCount');
        const createdCountElement = document.getElementById('createdCount');

        // 打开创建测试用例对话框
        if (createTestCaseBtn) {
            createTestCaseBtn.addEventListener('click', function() {
                createTestCaseModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                updateSelectedCount();
            });
        }

        // 关闭主模态对话框
        function closeMainModal() {
            createTestCaseModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
            // 重置所有选择
            stepCheckboxes.forEach(checkbox => {
                if (!checkbox.disabled) {
                    checkbox.checked = false;
                }
            });
            updateSelectedCount();
        }

        // 关闭按钮事件
        if (closeModal) {
            closeModal.addEventListener('click', closeMainModal);
        }
        if (cancelBtn) {
            cancelBtn.addEventListener('click', closeMainModal);
        }

        // 点击背景关闭模态框
        createTestCaseModal.addEventListener('click', function(e) {
            if (e.target === createTestCaseModal) {
                closeMainModal();
            }
        });

        // 关闭成功提示模态框
        if (closeSuccessModal) {
            closeSuccessModal.addEventListener('click', function() {
                successModal.classList.add('hidden');
                document.body.style.overflow = 'auto';
            });
        }

        // 全选未关联的步骤
        if (selectAllBtn) {
            selectAllBtn.addEventListener('click', function() {
                stepCheckboxes.forEach(checkbox => {
                    if (!checkbox.disabled) {
                        checkbox.checked = true;
                    }
                });
                updateSelectedCount();
            });
        }

        // 清空所有选择
        if (clearAllBtn) {
            clearAllBtn.addEventListener('click', function() {
                stepCheckboxes.forEach(checkbox => {
                    if (!checkbox.disabled) {
                        checkbox.checked = false;
                    }
                });
                updateSelectedCount();
            });
        }

        // 更新选中计数
        function updateSelectedCount() {
            const selectedCount = Array.from(stepCheckboxes).filter(cb => cb.checked && !cb.disabled).length;
            if (selectedCountElement) {
                selectedCountElement.textContent = selectedCount;
            }
        }

        // 为所有步骤复选框添加变更监听
        stepCheckboxes.forEach(checkbox => {
            checkbox.addEventListener('change', updateSelectedCount);
        });

        // 一键创建测试用例
        if (createSelectedBtn) {
            createSelectedBtn.addEventListener('click', function() {
                const selectedSteps = Array.from(stepCheckboxes).filter(cb => cb.checked && !cb.disabled);
                const selectedCount = selectedSteps.length;
                
                if (selectedCount === 0) {
                    alert('请至少选择一个未关联的步骤');
                    return;
                }

                // 显示创建进度（这里模拟创建过程）
                const button = this;
                const originalText = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>正在创建...';

                // 模拟创建过程
                setTimeout(() => {
                    // 创建新的测试用例（模拟数据）
                    const newTestCases = selectedSteps.map((step, index) => {
                        const stepLabel = step.nextElementSibling.textContent.trim();
                        const stepId = `TC${String(Date.now()).slice(-3)}${String(index + 1).padStart(2, '0')}`;
                        return {
                            id: stepId,
                            name: `${stepLabel}测试用例`,
                            module: '存款模块',
                            priority: '中',
                            status: '待执行',
                            creator: 'zhangweijun'
                        };
                    });

                    // 添加到测试用例库表格
                    addTestCasesToTable(newTestCases);

                    // 更新关联状态
                    selectedSteps.forEach(step => {
                        const statusSpan = step.closest('.flex').querySelector('.rounded-full');
                        statusSpan.className = 'text-xs px-2 py-1 bg-success/10 text-success rounded-full flex items-center';
                        statusSpan.innerHTML = '<i class="fa fa-check-circle mr-1"></i>已关联';
                        step.disabled = true;
                        step.checked = false;
                    });

                    // 更新统计数据
                    updateStatistics();

                    // 重置按钮
                    button.disabled = false;
                    button.innerHTML = originalText;

                    // 关闭主模态框
                    closeMainModal();

                    // 显示成功提示
                    if (createdCountElement) {
                        createdCountElement.textContent = selectedCount;
                    }
                    successModal.classList.remove('hidden');
                    
                }, 2000); // 模拟2秒创建时间
            });
        }

        // 添加测试用例到表格
        function addTestCasesToTable(testCases) {
            const tbody = document.querySelector('tbody');
            
            testCases.forEach(testCase => {
                const row = document.createElement('tr');
                row.className = 'hover:bg-neutral-50 transition-all-300 bg-blue-50';
                row.innerHTML = `
                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-neutral-700">
                        ${testCase.id}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                        ${testCase.name}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                        ${testCase.module}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-warning/10 text-warning">
                            ${testCase.priority}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap">
                        <span class="px-2 py-1 text-xs font-medium rounded-full bg-primary/10 text-primary">
                            ${testCase.status}
                        </span>
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-sm text-neutral-600">
                        ${testCase.creator}
                    </td>
                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                        <button class="text-primary hover:text-primary/80 mr-3">
                            <i class="fa fa-edit"></i> 编辑
                        </button>
                        <button class="text-neutral-500 hover:text-neutral-700 mr-3">
                            <i class="fa fa-eye"></i> 查看
                        </button>
                        <button class="text-success hover:text-success/80">
                            <i class="fa fa-play"></i> 执行
                        </button>
                    </td>
                `;
                
                // 添加到表格顶部（新创建的用例）
                tbody.insertBefore(row, tbody.firstChild);
                
                // 高亮动画
                setTimeout(() => {
                    row.classList.remove('bg-blue-50');
                }, 3000);
            });

            // 更新分页信息
            const currentCount = tbody.children.length;
            const paginationInfo = document.querySelector('.text-sm.text-neutral-500');
            if (paginationInfo) {
                paginationInfo.textContent = `显示 1-${Math.min(10, currentCount)} 条，共 ${currentCount} 条测试用例`;
            }
        }

        // 更新统计数据
        function updateStatistics() {
            const linkedStepsElement = document.getElementById('linkedSteps');
            const unlinkedStepsElement = document.getElementById('unlinkedSteps');
            
            if (linkedStepsElement && unlinkedStepsElement) {
                const linkedCount = document.querySelectorAll('input[type="checkbox"][disabled]').length;
                const unlinkedCount = document.querySelectorAll('input[type="checkbox"]:not([disabled])').length;
                
                linkedStepsElement.textContent = linkedCount;
                unlinkedStepsElement.textContent = unlinkedCount;
            }

            // 更新主页面的统计卡片
            const testCaseCountElement = document.querySelector('.text-2xl.font-bold.text-neutral-700');
            if (testCaseCountElement && testCaseCountElement.textContent === '156') {
                const currentCount = parseInt(testCaseCountElement.textContent);
                const newCount = currentCount + Array.from(stepCheckboxes).filter(cb => cb.disabled).length - 1;
                testCaseCountElement.textContent = newCount.toString();
            }
        }

        // 任务项点击效果
        const taskItems = document.querySelectorAll('.border-neutral-200');
        taskItems.forEach(item => {
            item.addEventListener('click', function(e) {
                if (e.target.type !== 'checkbox') {
                    const checkbox = this.querySelector('input[type="checkbox"]');
                    if (checkbox && !checkbox.disabled) {
                        checkbox.checked = !checkbox.checked;
                        updateSelectedCount();
                    }
                }
            });
        });

        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth'
                    });
                }
            });
        });

        // ===== 测试用例智能推荐功能 =====
        const recommendTestCaseBtn = document.getElementById('recommendTestCaseBtn');
        const recommendTestCaseModal = document.getElementById('recommendTestCaseModal');
        const closeRecommendModal = document.getElementById('closeRecommendModal');
        const cancelRecommendBtn = document.getElementById('cancelRecommendBtn');
        const selectAllRecommendBtn = document.getElementById('selectAllRecommendBtn');
        const clearAllRecommendBtn = document.getElementById('clearAllRecommendBtn');
        const generateSelectedRecommendBtn = document.getElementById('generateSelectedRecommendBtn');
        const selectedRecommendCountElement = document.getElementById('selectedRecommendCount');
        const recommendTestCaseList = document.getElementById('recommendTestCaseList');

        // 打开测试用例智能推荐模态框
        if (recommendTestCaseBtn) {
            recommendTestCaseBtn.addEventListener('click', function() {
                // 生成推荐的测试用例
                generateRecommendTestCases();
                
                // 显示模态框
                recommendTestCaseModal.classList.remove('hidden');
                document.body.style.overflow = 'hidden';
                updateRecommendSelectedCount();
            });
        }

        // 关闭测试用例智能推荐模态框
        function closeRecommendModalFunc() {
            recommendTestCaseModal.classList.add('hidden');
            document.body.style.overflow = 'auto';
        }

        // 关闭按钮事件
        if (closeRecommendModal) {
            closeRecommendModal.addEventListener('click', closeRecommendModalFunc);
        }
        if (cancelRecommendBtn) {
            cancelRecommendBtn.addEventListener('click', closeRecommendModalFunc);
        }

        // 点击背景关闭模态框
        if (recommendTestCaseModal) {
            recommendTestCaseModal.addEventListener('click', function(e) {
                if (e.target === recommendTestCaseModal) {
                    closeRecommendModalFunc();
                }
            });
        }

        // 全选推荐的测试用例
        if (selectAllRecommendBtn) {
            selectAllRecommendBtn.addEventListener('click', function() {
                const recommendCheckboxes = recommendTestCaseList.querySelectorAll('input[type="checkbox"]');
                recommendCheckboxes.forEach(checkbox => {
                    checkbox.checked = true;
                });
                updateRecommendSelectedCount();
            });
        }

        // 清空所有推荐选择
        if (clearAllRecommendBtn) {
            clearAllRecommendBtn.addEventListener('click', function() {
                const recommendCheckboxes = recommendTestCaseList.querySelectorAll('input[type="checkbox"]');
                recommendCheckboxes.forEach(checkbox => {
                    checkbox.checked = false;
                });
                updateRecommendSelectedCount();
            });
        }

        // 更新推荐选中计数
        function updateRecommendSelectedCount() {
            const recommendCheckboxes = recommendTestCaseList.querySelectorAll('input[type="checkbox"]');
            const selectedCount = Array.from(recommendCheckboxes).filter(cb => cb.checked).length;
            if (selectedRecommendCountElement) {
                selectedRecommendCountElement.textContent = selectedCount;
            }
        }

        // 生成推荐的测试用例
        function generateRecommendTestCases() {
            // 清空现有列表
            recommendTestCaseList.innerHTML = '';

            // 获取模型变更清单中的信息
            const modelInfo = extractModelInfo();

            // 基于模型信息生成推荐测试用例
            const recommendTestCases = createRecommendTestCases(modelInfo);

            // 渲染推荐的测试用例列表
            renderRecommendTestCases(recommendTestCases);
        }

        // 提取模型变更清单中的信息
        function extractModelInfo() {
            // 从页面实际结构中提取模型信息
            return {
                businessDomain: "个人金融服务",
                valueStream: "个人存款管理流程",
                activities: [
                    {
                        name: "存款产品操作管理",
                        tasks: [
                            {
                                name: "定期存款管理",
                                steps: [
                                    { name: "创建定期存款账户", components: ["个人存款管理流程", "存款产品操作管理", "定期存款管理"] },
                                    { name: "设置自动转存规则", components: ["个人存款管理流程", "存款产品操作管理", "定期存款管理"] },
                                    { name: "利息计算与发放", components: ["个人存款管理流程", "存款产品操作管理", "定期存款管理"] }
                                ]
                            },
                            {
                                name: "存款产品推荐",
                                steps: [
                                    { name: "客户需求分析", components: ["个人存款管理流程", "存款产品操作管理", "存款产品推荐"] },
                                    { name: "智能产品匹配", components: ["个人存款管理流程", "存款产品操作管理", "存款产品推荐"] },
                                    { name: "推荐结果展示", components: ["个人存款管理流程", "存款产品操作管理", "存款产品推荐"] }
                                ]
                            }
                        ]
                    }
                ]
            };
        }

        // 创建推荐测试用例
        function createRecommendTestCases(modelInfo) {
            const testCases = [];
            
            // 为每个活动、任务和步骤生成测试用例
            modelInfo.activities.forEach((activity, activityIndex) => {
                activity.tasks.forEach((task, taskIndex) => {
                    task.steps.forEach((stepObj, stepIndex) => {
                        // 根据步骤内容确定优先级
                        let priority = '中';
                        if (stepObj.name.includes('创建') || stepObj.name.includes('设置') || stepObj.name.includes('计算')) {
                            priority = '高';
                        } else if (stepObj.name.includes('分析') || stepObj.name.includes('匹配')) {
                            priority = '中';
                        } else {
                            priority = '低';
                        }
                        
                        // 生成测试用例
                        testCases.push({
                            id: `RT-${activityIndex + 1}-${taskIndex + 1}-${stepIndex + 1}`,
                            name: `${stepObj.name}测试用例`,
                            module: `${activity.name} - ${task.name}`,
                            priority: priority,
                            description: `验证${stepObj.name}功能的正确性和稳定性`,
                            components: stepObj.components
                        });
                    });
                });
            });
            
            // 添加一些额外的推荐测试用例
            testCases.push(
                {
                    id: 'RT-EXT-1',
                    name: '边界条件测试用例',
                    module: '存款模块',
                    priority: '高',
                    description: '验证存款金额、期限等边界条件的处理',
                    components: ['个人存款管理流程']
                },
                {
                    id: 'RT-EXT-2',
                    name: '异常处理测试用例',
                    module: '存款模块',
                    priority: '高',
                    description: '验证网络异常、数据库异常等情况下的系统表现',
                    components: ['个人存款管理流程']
                },
                {
                    id: 'RT-EXT-3',
                    name: '性能测试用例',
                    module: '存款模块',
                    priority: '中',
                    description: '验证系统在高并发情况下的性能表现',
                    components: ['存款产品操作管理']
                },
                {
                    id: 'RT-EXT-4',
                    name: '安全性测试用例',
                    module: '存款模块',
                    priority: '高',
                    description: '验证系统安全机制，防止未授权访问',
                    components: ['存款产品操作管理']
                }
            );
            
            return testCases;
        }

        // 渲染推荐的测试用例列表
        function renderRecommendTestCases(testCases) {
            // 清空现有列表
            recommendTestCaseList.innerHTML = '';

            // 为每个测试用例创建HTML元素
            testCases.forEach((testCase, index) => {
                // 构建关联组件信息HTML
                let componentsHtml = '';
                if (testCase.components && testCase.components.length > 0) {
                    componentsHtml = `
                        <div class="mt-2">
                            <div class="text-xs text-neutral-500 font-medium">关联组件:</div>
                            <div class="flex flex-wrap gap-1 mt-1">
                                ${testCase.components.map(component => 
                                    `<span class="px-2 py-1 bg-blue-100 text-blue-800 text-xs rounded-full">${component}</span>`
                                ).join('')}
                            </div>
                        </div>
                    `;
                }

                const testCaseElement = document.createElement('div');
                testCaseElement.className = 'flex items-start justify-between p-3 bg-white rounded border hover:border-secondary/30 transition-all-300';
                testCaseElement.innerHTML = `
                    <div class="flex items-start flex-1">
                        <input type="checkbox" id="recommend-${testCase.id}" class="mr-3 mt-1 h-4 w-4 text-secondary rounded border-neutral-300 recommend-checkbox" data-id="${testCase.id}" data-name="${testCase.name}" data-module="${testCase.module}" data-priority="${testCase.priority}" data-description="${testCase.description}" data-components='${JSON.stringify(testCase.components || [])}'>
                        <label for="recommend-${testCase.id}" class="flex-1 cursor-pointer">
                            <div class="flex items-center">
                                <span class="font-medium text-neutral-800">${testCase.name}</span>
                                <span class="ml-2 px-2 py-1 text-xs font-medium rounded-full bg-${getPriorityColor(testCase.priority)}/10 text-${getPriorityColor(testCase.priority)}">
                                    ${testCase.priority}
                                </span>
                            </div>
                            <div class="text-sm text-neutral-600 mt-1">${testCase.module}</div>
                            <div class="text-xs text-neutral-500 mt-1">${testCase.description}</div>
                            ${componentsHtml}
                        </label>
                    </div>
                `;
                
                recommendTestCaseList.appendChild(testCaseElement);
            });

            // 为新添加的复选框添加事件监听器
            const recommendCheckboxes = recommendTestCaseList.querySelectorAll('.recommend-checkbox');
            recommendCheckboxes.forEach(checkbox => {
                checkbox.addEventListener('change', updateRecommendSelectedCount);
            });
        }

        // 获取优先级颜色
        function getPriorityColor(priority) {
            switch (priority) {
                case '高': return 'danger';
                case '中': return 'warning';
                case '低': return 'success';
                default: return 'neutral';
            }
        }

        // 生成选中的推荐测试用例
        if (generateSelectedRecommendBtn) {
            generateSelectedRecommendBtn.addEventListener('click', function() {
                const recommendCheckboxes = recommendTestCaseList.querySelectorAll('.recommend-checkbox');
                const selectedTestCases = Array.from(recommendCheckboxes).filter(cb => cb.checked);
                const selectedCount = selectedTestCases.length;
                
                if (selectedCount === 0) {
                    alert('请至少选择一个测试用例建议');
                    return;
                }

                // 显示创建进度（这里模拟创建过程）
                const button = this;
                const originalText = button.innerHTML;
                button.disabled = true;
                button.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>正在生成...';

                // 模拟创建过程
                setTimeout(() => {
                    // 创建新的测试用例（基于推荐的测试用例）
                    const newTestCases = selectedTestCases.map(checkbox => {
                        const stepId = `TC${String(Date.now()).slice(-3)}${Math.floor(Math.random() * 100).toString().padStart(2, '0')}`;
                        // 解析组件数据
                        const components = JSON.parse(checkbox.dataset.components || '[]');
                        return {
                            id: stepId,
                            name: checkbox.dataset.name,
                            module: checkbox.dataset.module,
                            priority: checkbox.dataset.priority,
                            status: '待执行',
                            creator: 'zhangweijun',
                            description: checkbox.dataset.description,
                            components: components
                        };
                    });

                    // 添加到测试用例库表格
                    addTestCasesToTable(newTestCases);

                    // 更新统计数据
                    updateStatistics();

                    // 重置按钮
                    button.disabled = false;
                    button.innerHTML = originalText;

                    // 关闭推荐模态框
                    closeRecommendModalFunc();

                    // 显示成功提示
                    if (createdCountElement) {
                        createdCountElement.textContent = selectedCount;
                    }
                    successModal.classList.remove('hidden');
                    
                }, 2000); // 模拟2秒创建时间
            });
        }
    </script>
</body>
</html>